import React from 'react';
import { Link } from 'react-router-dom';
import {
  Form,
  Input,
  Radio,
  Button,
  Upload,
  Icon,
} from 'antd';
import { LogoHeader } from '../../components/Header';

import styles from './index.module.less';

class Feedback extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  render() {
    const { form: { getFieldDecorator } } = this.props;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 12 },
    };

    const rightContent = (
      <div className={styles.menuBox}>
        <Link className={styles.menuItem} to='/'>首页</Link>
        <Link className={styles.menuItem} to='/'>买家中心</Link>
        <Link className={styles.menuItem} to='/'>卖家中心</Link>
      </div>
    );

    return (
      <React.Fragment>
        <LogoHeader moduleName='反馈建议' rightContent={rightContent} />
        <div className={styles.content}>
          <div className={`${styles.box} ${styles.clearfix}`}>
            <Form onSubmit={this.handleSubmit}>
              <Form.Item
                {...formItemLayout}
                label='您的身份类型'
              >
                {getFieldDecorator('role', {
                  rules: [
                    {
                      required: true,
                      message: '请选择您的身份类型',
                    },
                  ],
                })(
                  <Radio.Group>
                    <Radio value='a'>买家</Radio>
                    <Radio value='b'>买家</Radio>
                    <Radio value='c'>以上都是</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
              <Form.Item
                {...formItemLayout}
                label='问题类型'
              >
                {getFieldDecorator('radio-group', {
                  rules: [
                    {
                      required: true,
                      message: '请选择问题类型',
                    },
                  ],
                })(
                  <Radio.Group>
                    <Radio value='a'>网站建议</Radio>
                    <Radio value='b'>网站故障</Radio>
                    <Radio value='c'>其他</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
              <Form.Item
                {...formItemLayout}
                label='详细说明您要举报/反馈的问题'
              >
                {getFieldDecorator('detail', {
                  rules: [
                    {
                      required: true,
                      message: '请填写举报/反馈',
                    },
                  ],
                })(
                  <Input.TextArea placeholder='请详细填写举报/反馈内容，500字以内' style={{ height: 160 }} />
                )}
              </Form.Item>
              <Form.Item
                {...formItemLayout}
                label='辅助材料'
                extra='辅助材料能够更好的帮助我们查证您的举报/反馈信息，暂支持jpg/jpeg/png形式'
              >
                {getFieldDecorator('upload')(
                  <Upload listType='picture-card'>
                    <div>
                      <Icon type="plus" />
                      <div className="ant-upload-text">上传</div>
                    </div>
                  </Upload>
                )}
              </Form.Item>
              <Form.Item
                {...formItemLayout}
                label='联系方式'
                extra='我们会将以此联系方式通知您的举报/反馈结果'
              >
                {getFieldDecorator('contact', {
                  rules: [
                    {
                      required: true,
                      message: '请填写您联系方式',
                    },
                  ],
                })(
                  <Input autoComplete='off' placeholder='请填写您联系方式' />
                )}
              </Form.Item>
              <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
                <Button type='primary' htmlType='submit' style={{ width: 370 }}>
                  确定提交反馈
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default Form.create()(Feedback);
